<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>提交订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">
    
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">提交订单</h1>
        </header>
        
        <div class="mui-content" style="padding-top: 57px;">
            <!-- 收货地址 -->
            <div class="de-address" @click="user_address">
                <div class="de-address-img d-left">
                    <div></div>
                </div>
                <div class="de-address-row">
                    <div class="de-address-user"><span>收货人：{{address.truename}}</span><label>{{address.mobile}}</label></div>
                    <div class="de-address-addr">收货地址：山西省大同市灵丘县 {{address.detail}}</div>
                </div>
                <div class="de-address-img d-right">
                    <div></div>
                </div>
            </div>
            <div class="de-address-line"></div>
            <!-- 收货地址结束 -->

            <!-- 订单列表 -->
            <div class="de-order">
                <div class="de-order-head">
                    <img src="../mui/hello-mui/images/yuantiao.jpg">
                    <span>天猫旗舰店</span>
                </div>
                <div v-for="row in goods_list" class="de-order-goods">
                    <div @click="goods_detail(row.id)" class="de-order-img">
                        <img :src="api_host + row.images">
                    </div>
                    <div class="de-order-info">
                        <div>{{row.goods_name}}</div>
                        <span></span>
                    </div>
                    <div class="de-order-price">
                        <div>￥{{row.special_price}}</div>
                        <label>X{{row.number}}</label>
                    </div>
                </div>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>给卖家留言</label>
                        <input v-model="to_msg" type="text" class="mui-input-clear" placeholder="填写内容已于卖家协商">
                    </div>
                </form>
                <div class="de-order-plan">
                    <b>共2件，合计：</b>
                    <span>￥{{all_price}}</span>
                </div>
            </div>
            <div style="min-height: 50px;"></div>
            <!-- 订单结算按钮 -->
            <div class="de-cart-pay">
                <div class="de-checkbox"></div>
                <div class="de-cart-pay-text"></div>
                <div class="de-cart-pay-price">合计<label>￥</label><span>{{all_price}}</span></div>
                <div @click="submit_order" class="de-cart-pay-btn">提交订单</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                api_host: de.api_host,
                goods_list: [],
                all_price: 0,
                pay_type: 'alipay',
                to_msg: '',
                address: {},
            },
            created: function (){
                // 验证是否登陆
                if (!de.auth_login()) {
                    de.href("../login.html");
                }
                this.get_car_list();
                this.get_address();
            },
            mounted: function (){

            },
            methods: {
                // 购物车商品列表
                get_car_list: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.api.order_car, {token: login}).then(function (data){
                        var dd = data.data;
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                            the.all_price = dd.all_price;
                            // 购物车为空则跳转首页
                            if (the.goods_list.length == 0) {
                                de.href('../index.html');
                            }
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取默认地址
                get_address: function ( id ){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.api.address_index, {token: login, default: 1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.address = dd.data;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                // 商品详情
                goods_detail: function ( id ){
                    de.href('./goods.html?id='+id);
                },
                // 用户地址
                user_address: function (){
                    de.href('../home/address.html');
                },
                // 提交订单
                submit_order: function (){
                    var the = this;
                    var login = de.auth_login();
                    // 提交数据
                    axios.post(de.api.order_index, {token: login, address_id: the.address.id, pay_type: the.pay_type}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            document.write(dd.data);
                        } else {
                            alert(dd.info);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            },
        });
    </script>
</body>

</html>